/**
 * User: Célia Calçada
 * Date: 10-08-2013
 * Poi detail carousel view
 */

Ext.define('Mobile-app.view.PoiDetail', {
    extend: 'Ext.Panel',
    alias: 'widget.poidetailpanel',

    requires: [
        'Ext.carousel.Carousel'
    ],

    config: {
        modal: true,
        centered: true,
        hideOnMaskTap: true,
        width: '80%',
        height: '90%',
        padding: '0 0 0 0',

        layout: {
            type: 'vbox',
            align: 'stretch'
        },

        items: [
            {
                itemId: 'poi-carousel',
                xtype: 'carousel',
                cls: 'panel-letter',
                flex: 1,
                items: [
                    {
                        xtype: 'panel',
                        scrollable: true,
                        padding: '10 10 10 10',
                        items: {
                            xtype: 'toolbar',
                            docked: 'top',
                            ui: 'light',
                            title: $.t('main.detailed information')
                        },

                        tpl: new Ext.XTemplate(
                            '<b>', $.t('main.name'), '</b>:</b> {name}<br>',
                            '<b>', $.t('main.description'), '</b>: {description}<br>',
                            '<b>', $.t('main.category'), '</b>: {category}<br><br>',
                            '<b>', $.t('main.radius'), '</b>: {radius}m<br>',
                            '<b>', $.t('main.position'), ':</b> <a href="https://maps.google.pt/maps?q={latitude},{longitude}" target="_blank">{latitude:this.convertLatitude}, {longitude:this.convertLongitude}</a><br>',
                            '<b>', $.t('main.maximum permanence time'), '</b>: {maximumTimeOfPermanence}\'',

                            {
                                /***
                                 * Will convert the latitude to human readable
                                 * @param lat The latitude
                                 * @returns {String} Coordinate in degrees
                                 */
                                convertLatitude: function (lat) {

                                    return this.convertCorToDec(lat, 'lat')
                                },
                                /***
                                 * Will convert the longitude to human readable
                                 * @param lng The longitude
                                 * @returns {String} Coordinate in degrees
                                 */
                                convertLongitude: function (lng) {

                                    return this.convertCorToDec(lng, 'lng')
                                },

                                /**
                                 * Will receive coordinates in decimal degrees and transform in (aº b' c'') format
                                 * @param coordinate The coordinate in decimal degrees
                                 * @param  axis One of [lat,lng]
                                 * @return String The formatted coordinate
                                 */
                                convertCorToDec: function (coordinate, axis) {
                                    //check if lat and lng are defined
                                    if (!coordinate) return '';
                                    //set some local vars
                                    var sCor, d, m, s;
                                    //calculate position (North, South, East or West)
                                    if (axis == 'lat') {
                                        if (coordinate < 0) {
                                            axis = 'S';
                                            coordinate = Math.abs(coordinate);
                                        } else {
                                            axis = 'N';
                                        }
                                    }
                                    else {
                                        if (coordinate < 0) {
                                            axis = 'W';
                                            coordinate = Math.abs(coordinate);
                                        } else {
                                            axis = 'E';
                                        }
                                    }
                                    //calculate the latitude degrees, minutes and seconds
                                    sCor = coordinate.toString().split('.');
                                    d = sCor[0];
                                    m = ((coordinate - d) * 60).toString().split('.');
                                    s = ((((coordinate - d) * 60) - m[0]) * 60);
                                    m = m[0];
                                    //set values
                                    d = parseInt(d);
                                    m = Math.round(m);
                                    s = Math.round(s);
                                    //format sting
                                    sCor = axis + " " + d + "º " + m + "' " + s + "''";

                                    //return string
                                    return sCor;
                                }
                            }

                        )	// end tpl

                    },
                    {
                        xtype: 'panel',
                        scrollable: null,
                        layout: 'fit',
                        items: [
                            {
                                xtype: 'toolbar',
                                docked: 'top',
                                ui: 'light',
                                title: 'Mapa'
                            },
                            Ext.create('Ext.Map', {
                                mapOptions: {
                                    center: new google.maps.LatLng(38.524801, -8.891029),  //nearby Setúbal
                                    zoom: 12,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                                    navigationControl: true,
                                    navigationControlOptions: {
                                        style: google.maps.NavigationControlStyle.DEFAULT
                                    }
                                }
                            })
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        padding: '10,10,10,10',
                        ui: 'light',
                        items: [
                            {
                                xtype: 'button',
                                //text: 'Sair',
                                itemId: 'editButton',
                                iconMask: true,
                                ui: 'plain',
                                // ui: 'confirm-round',
                                iconCls: 'compose'
                            },
                            { xtype: 'spacer' },
                            {
                                xtype: 'button',
                                itemId: 'deleteButton',
                                ui: 'plain',
                                //ui: 'decline',
                                iconMask: true,
                                iconCls: 'trash'
                            }
                        ]

                    }

                ]
            }
        ],
        listeners: [
            {
                delegate: '#poi-carousel',
                event: 'activeitemchange',
                fn: 'activeItemChange'
            },
            {
                delegate: '#editButton',
                event: 'tap',
                fn: 'showEditPanel'
            },
            {
                delegate: '#deleteButton',
                event: 'tap',
                fn: 'showDeleteMessage'
            }
        ]

    },

    /***
     * Fires when the activeItem configuration is changed by setActiveItem
     * @param carousel The Ext.Container instance.
     * @param value The new item being set
     * @param oldValue The existing item
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    activeItemChange: function (carousel, value, oldValue, eOpts) {

        //check if the item active is the map
        if (value.down('map') instanceof Ext.Map) {
            this.fireEvent('showMarker', value.down('map'));
        }
    },

    /***
     * Hide panel with animation
     * @param animation
     */
    hide: function (animation) {

        var me = this;

        //we fire this event so the controller can deselect all items immediately.
        me.fireEvent('hideanimationstart', me);

        //show the mask again
        me.callParent();
    },

    /***
     * Show edit POI panel
     */
    showEditPanel: function () {

        var record = Ext.getCmp('poiList').getSelection()[0];
        this.fireEvent('showEditPanel', record);
    },

    /***
     * Ask user if he really wants to delete the POI
     */
    showDeleteMessage: function () {

        Ext.Msg.confirm($.t('main.remove poi'), $.t('main.remove poi question'), function (buttonId) {
            if (buttonId === 'yes') {
                this.fireEvent('showDeleteMessage', Ext.getCmp('poiList').getSelection()[0]);
            }
        }, this);
    }

});